<!-- 通知 -->
<template>
  <view class="classify-dom">
    <view class="classify-main">
      <scroll-view scroll-y class="classify-right">
        <view class="classify-right-item">
          <view class="classify-right-item-container">
            <view class="thumb-box" v-for="(item,index) in rightData" :key="index" @click="goto(item.xxnr)">
              <view class="item-menu-image">
                <image :src="newsFileUrl + item.tpdz" mode="aspectFill" style="width: 200rpx; height: 120rpx; border-radius: 8rpx; background-color: #eeeeee;">
                </image>
              </view>
              <view class="item-menu-content">
                <view class="item-menu-title">{{item.xxbt}}</view>
                <view class="item-menu-describe">{{item.xxfbt}}</view>
                <view class="item-menu-time">
                  <text>{{item.fbr}} </text>
                  <text>{{item.fbsj}} </text>
                </view>
              </view>
            </view>
            <view v-show="rightData.length < 1" class="nodata">
              暂无内容
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { newsFileUrl } from '@/api/url'
  import { HlwFbxx } from "@/api/tables/news";
  import { HlwFbxxQuery } from "@/api/request/news"
  import { ref, onMounted } from 'vue'
  let rightData = ref<Array<HlwFbxx>>([]);

  onMounted(() => {
    getRightData()
  })
  function getRightData() {
    uni.showLoading({
      title: '加载中'
    });
    HlwFbxxQuery({
      data: {
        xxzl: '101',
      },
      success: (res) => {
        rightData.value = res || []
        uni.hideLoading()
      },
      fail: () => {
        uni.hideLoading()
      }
    })
  }
  function goto(xxnr) {
    uni.navigateTo({
      url: "/pages/bspsd/news/news/details?xxnr=" + xxnr,
    })
  }
</script>

<style lang="scss" scoped>
  .classify-dom {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;

    .classify-main {
      flex: 1;
      display: flex;
      overflow: hidden;

      .classify-left {
        width: 150rpx;
        height: 100%;

        &-item {
          min-height: 110rpx;
          padding: 5rpx;
          background: #f6f6f6;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          color: #444;
          font-weight: 400;
          line-height: 1;
        }

        &-item-active {
          position: relative;
          color: #000;
          font-weight: 600;
          background: #fff;
        }

        &-item-active::before {
          content: "";
          position: absolute;
          border-left: 4px solid #3c9cff;
          height: 32rpx;
          left: 0;
          top: 39rpx;
        }
      }

      .classify-right {
        padding: 16rpx;
        background-color: rgb(250, 250, 250);

        &-item {
          margin-bottom: 30rpx;
          background-color: #fff;
          padding: 16rpx;
          border-radius: 8rpx;

          &-title {
            font-size: 26rpx;
            color: #303133;
            font-weight: bold;
          }

          &-container {
            .thumb-box {
              display: flex;
              padding: 20rpx 0;
              border-bottom: 1rpx solid #eee;

              .item-menu-image {
                width: 200rpx;
                height: 120rpx;
              }

              .item-menu-content {
                padding-left: 10rpx;
                width: calc(100% - 200rpx);
              }

              .item-menu-title {
                line-height: 1.5;
                font-size: 26rpx;
                color: #303133;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
              }

              .item-menu-describe {
                height: 60rpx;
                font-size: 22rpx;
                color: #afafb5;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }

              .item-menu-time {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                font-size: 20rpx;
                color: #9b9ba1;
              }
            }
          }
        }
      }
    }
  }

  .nodata {
    color: #eee;
    text-align: center;
    padding: 20px;
  }
</style>